// 分类相关的业务逻辑
import { findTopCategory } from '@/api/category'
import { ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
function useCategory() {
  const categroy = ref({})
  const route = useRoute() // this.$route 在setup中执行
  async function loadCategory(id) {
    // 路由参数的获取 this不可用
    const res = await findTopCategory(id)
    categroy.value = res.data.result
  }
  // 路由缓存问题: 当点击切换路由的时候 对应的组件并没有重新渲染

  // 机制: vue-router为了性能考虑 在path不发生变化的时候 会默认走缓存机制 path对应的组件不会重新渲染
  // 对应的生命周期也不会重新执行

  // 业务要求：当参数发生变化的时候 使用最新的参数获取最新的数据

  // 业务失败的原因：由于缓存机制 -> 组件不重新渲染 -> 生命周期函数不执行（created）-> loadCategory不执行
  // -> 接口不能重新发送 -> 最新的数据无法获取

  // 解决方案：1.不走缓存 2.想办法重新执行loadCategory
  // 不走缓存 强行破坏缓存机制  key
  // 单独执行方法   beforeRouteUpdate

  /*
    方案对比
     1. key   简单粗暴 只需要配置一次全部失效 性能较差
        router-view 不走缓存 不管当前路径对应的组件中有多少个子组件孙组件 全部需要重新渲染

     2. beforeRouteUpdate  精细化的更新 缓存机制还在 定向的想要执行哪个函数就执行对应的函数
        性能高  写法复杂

    如何选择？
     绝大多数情况,直接使用key完全可以
     如果场景下对性能要求很高 此时可以选择beforeRouteUpdate
  */
  // 首次页面刚打开时使用初始id
  loadCategory(route.params.id)
  onBeforeRouteUpdate((to) => {
    // 执行时机: 路由每次更新前都自动执行
    // to: 跳转的目标路由对象
    console.log(to)
    // 执行重新拉取数据的动作
    // 路由点击变化的时候 需要使用to里面params.id 去获取最新的数据
    loadCategory(to.params.id)
  })
  return {
    categroy
  }
}

export default useCategory
